import React, { useEffect, useState, useRef } from 'react';
import { Menu } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { AuthLevel, AdminType } from '@/common/contact';
import './index.less';
const management = (props) => {
  const { dispatch, departmentNewList = [], loading, list } = props;

  const childRef = useRef();
  const [params, setParams] = useState({ departmentId: '' });
  useEffect(() => {
    dispatch({
      type: 'system/fetchListDepartment',
    });
  }, []);
  useEffect(() => {
    childRef.current.fetchGetData();
  }, [params]);
  console.log(props);
  const filterList = (list) => {
    return list.map((item) => {
      const { departmentName: label, id: key, subDepartmentList: children } = item;
      const localItem = {
        label,
        key,
        children: children ? filterList(children) : undefined,
      };
      return localItem;
    });
  };
  const searchItems = [
    {
      label: '搜索关键词',
      name: 'keyword',
    },
    {
      label: '是否授权企业微信',
      name: 'qywxAuth',
      select: {
        0: '未授权',
        1: '已授权',
      },
      type: 'select',
    },
    {
      label: '授权企业微信接口许可级别',
      name: 'qywxApiAuthLevel',
      select: AuthLevel,
      type: 'select',
    },
    {
      label: '状态',
      name: 'status',
      select: {
        0: '禁用',
        1: '启用',
      },
      type: 'select',
    },
    {
      label: '员工类型 ',
      name: 'adminType',
      select: AdminType,
      type: 'select',
    },
  ];
  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '手机',
      dataIndex: 'mobile',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '岗位类型',
      dataIndex: 'adminType',
      render: (e) => {
        return AdminType[e];
      },
    },
    {
      title: '是否授权企业微信',
      dataIndex: 'qywxAuth',
    },
    {
      title: '企业微信接口许可到期日期',
      dataIndex: 'qywxApiAuthExpiredDate',
    },
    {
      title: '授权企业微信接口许可级别',
      dataIndex: 'qywxApiAuthLevel',
      render: (e) => {
        return AuthLevel[e];
      },
    },
  ];
  return (
    <div className="management_box">
      <div className="management_box_left">
        <Menu
          onOpenChange={(e) => {
            setParams({ departmentId: e[e.length - 1] });
          }}
          onClick={(e) => {
            const { key } = e;
            setParams({ departmentId: key });
          }}
          mode={'inline'}
          theme={'light'}
          items={filterList(departmentNewList)}
        ></Menu>
      </div>
      <div className="management_box_right">
        <TableDataBlock
          searchItems={searchItems}
          params={{ ...params }}
          firstFetch={false}
          cRef={childRef}
          loading={loading}
          noCard={true}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          dispatchType="system/fetchAdmin"
          {...list}
        ></TableDataBlock>
      </div>
    </div>
  );
};

export default connect(({ system, loading }) => ({
  ...system,
  loading: loading.models.system,
}))(management);
